<template>
  <div>
    <div id="title">药品分类管理</div>

    <div id="allmedicine">
      <div id="allmedicine-head">
        <i class="el-icon-document"></i>
        <span>分类列表</span>
        <el-button plain id="addbutton" @click="dialogFormVisible = true"
          >新增分类</el-button
        >
        <el-dialog title="新增药品分类" :visible.sync="dialogFormVisible">
          <el-form :model="medicineCategoryForm">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input
                v-model="medicineCategoryForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="上级分类" :label-width="formLabelWidth">
              <el-select
                v-model="medicineCategoryForm.upperLevel"
                placeholder="请选择..."
              >
                <el-option label="分类一" value="fenleiyi"></el-option>
                <el-option label="分类二" value="fenleier"></el-option>
              </el-select>
              不选择分类默认为顶级分类
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="medicineCategoryForm.remarks"
                maxlength="140"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="是否显示" :label-width="formLabelWidth">
              <el-radio
                v-model="medicineCategoryForm.isDisplayed"
                label="displayed"
                >是</el-radio
              >
              <el-radio
                v-model="medicineCategoryForm.isDisplayed"
                label="notDisplayed"
                >否</el-radio
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>

      <el-table
        id="allmedicine-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column
          prop="name"
          label="分类名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="level"
          label="级别"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="isDisplayed"
          label="状态"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="submitter"
          label="上传人"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="addtime"
          label="添加时间"
          width="100"
        ></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="addNewLowerLevel(scope.$index, scope.row)"
              >新增下级</el-button
            >
            <el-button
              type="text"
              @click="showLowerLevel(scope.$index, scope.row)"
              >查看下级</el-button
            >
            <el-button type="text" @click="EditDetails(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button size="small" @click="toggleSelection()">取消选择</el-button>
        <el-button size="small" type="danger" @click="multipleDelete()"
          >批量删除</el-button
        >
        <el-pagination
          id="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageIndex"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>b 

<script>
export default {
  name: "Feedback",
  data() {
    return {
      tableData: [],
      pageTotal: 0,
      pageParams: {
        pageIndex: 1,
        pageSize: 2,
      },
      multipleSelection: [],
      dialogFormVisible: false,
      medicineCategoryForm: {
        name: "",
        upperLevel: "",
        remarks: "",
        radio: "notDisplayed",
      },
      formLabelWidth: "150px",
    };
  }, 
  created() {
    this.pagehelper();
  },
  methods: {
      //所有
      pagehelper() {
      this.$axios
        .get("/medicineCategory/getAll", {
          params: {
            pageIndex: this.pageParams.pageIndex,
            pageSize: this.pageParams.pageSize,
          },
        })
        .then((res) => {
          console.log(res.data);
          res.data.data.list.forEach((data) => {
            if (data.level === 1) {
              data.level = "一级";
            } else if(data.level === 2) {
              data.level = "二级";
            };
            if (data.isDisplayed === 1) {
              data.isDisplayed = "显示";
            } else if (data.isDisplayed === 0) {
              data.isDisplayed = "不显示";
            };
          });
          this.tableData = res.data.data.list;
          this.pageTotal = res.data.data.total;
        });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    
    //批量删除
    multipleDelete() {
      console.log(this.multipleSelection);
      let temp = [];
      this.multipleSelection.forEach((data) => {
        temp.push(data.id);
      });
      console.log(temp);
      this.$confirm("此操作将永久删除选中行的数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$axios
            .post("/medicineCategory/multiDelete", temp)
            .then((res) => {
                this.$message({
                type: "success",
                message: "删除成功",
          });
            });
        }).catch(() => {
          console.log("不删了！");
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    
    addNewMedicine() {
      this.$router.push({ path: "/index/medicinedetails" });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除当前行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //console.log("删一条！");
          this.$axios
            .get("/medicineCategory/deleteOne", {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              //console.log(res.data);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          console.log("不删了！");
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

  },
};
</script>

<style>
#title {
  font-size: 25px;
  font-weight: bolder;
}
#allmedicine {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 1000px;
}
#allmedicine-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-document {
  margin-left: 10px;
  margin-top: 15px;
}
#page {
  float: right;
}
#addbutton {
  margin-left: 700px;
}
</style>